<template>
  <view style="">
    <view class="tipText">
      会员等级基于近12个月的经验值计算
      <view class="sText" @click="toCMSmemberRule">
        <label class="" style="margin-right: 10rpx;">
          计算规则
        </label>
        <label class="macallan-icon mcl-youjiantou"></label>
      </view>
    </view>
    <view class="" style=" padding-top: 115rpx;">
      <view class="orderItem" v-for="(item, index) in levelLists" :key="index" v-if="listLength">
        <view class="line title">
          <label class="text_font">{{getSourceText(item.source)}}</label>
          <label class="text_font">{{item.expValue |  filiterExpValue}}</label>
        </view>
        <view class="line content">
          <label class="text_font">{{item.remark}}</label>
          <label class="text_font">{{UTCformat(item.dateObtain)}}</label>
        </view>
      </view>
      <view class="empty-cartHidden empty_cart" v-if="!listLength">
        <image class="icon-xl"
          src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/cart/empty_cart_logo4x.png" />
        <view class="empty_cart_text">暂无经验值记录</view>
        <view class="shop_btn">
          <view class="block btn_group">
            <view class="get_store" @click="linkChagne">去商城页选购</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script module="filterChecked" lang="wxs" src="../../utils/filter.wxs"></script>
<script>
  import api from '@/api/api'
  import NavBar from '../../components/common/navbar';
  import commonFunction from '@/utils/commonFunction.js';
  import {
    SEL_CLASS_CODE,
    SEL_ACTIVE_CODE,
    SYSTEM_INFO,
    USER_INFO,
    CUSTOMER_INFO,
    CUSTOMER_HOTFIX,
    CART_KEY,
    MERCHANT_INFO
  } from '@/utils/constant';
  export default {
    config: {
      navigationStyle: 'custom',
      navigationBarTitleText: ''
    },
    components: {
      navBar: NavBar,
    },

    data() {
      return {
        isShowCustomNavBar: true,
        // 组件所需的参数
        navbarData: {
          showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
          navbarTitle: '等级计算明细', //导航栏 中间的标题
          hideSearch: false, //隐藏搜索
          backPreviewPage: 0 //返回上级页面 只显示返回按钮
        },
        levelLists: [],
        nowPages: '',
        pageNumber: 1,
        listLength: 1
      };
    },
    filters: {
      filiterExpValue(value) {
        let value1;
        if (value / 1 > 0) {
          value1 = '+' + value
        } else {
          if (!value) {
            value1 = 0
          } else {
            let values = value.toString().slice(1)
            value1 = '-' + values
          }
        }
        return value1;
      }

    },
    onLoad: async function(option) {
      await this.$onLaunched;
      let pages = getCurrentPages();
      var currPage = pages[pages.length - 1];
      this.nowPages = currPage.route;
      this.getLevelDetailList()
    },
    onShow() {
      getApp().cl_tracker.track('mini_program_view', {
        path: this.nowPages,
        pageName: '等级计算明细',
      })
    },
    onReachBottom() {
      if (this.listLength > 19) {
        this.pageNumber++
        this.getLevelDetailList()
      }
    },
    mounted() {
      this.getLevelDetailList()
    },
    methods: {
      sliceValue(value) {
        return value.slice(1)
      },
      getLevelDetailList: async function() {
        let that = this;
        let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
        if (customerInfo && customerInfo.jwt) {
          const json = await api.getLevelLists({
            header: {
              jwt: customerInfo.jwt
            },
            query: {
              page: that.pageNumber
            }
          });
          if (json.code == 1000) {
            that.listLength = json.data.length
            that.levelLists = [...that.levelLists, ...json.data];
          }
        }
      },
      toCMSmemberRule() {
        this.$commonSensors.lithaTrack.cTrack('MemberEquityPageClick',{page_name:"经验明细", button_name:"计算规则" });
        this.$emit('navigate', 0)
      },
      // UTC转为北京时间
      UTCformat(utc) {
        var date = new Date(utc),
          y = date.getFullYear(),
          month = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + parseInt(date.getMonth() + 1),
          day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate(),
          h = date.getHours() > 9 ? date.getHours() : '0' + date.getHours(),
          m = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes(),
          s = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds();
        var res = y + '-' + month + '-' + day;
        return res;
      },

      getSourceText(source) {
        return source == '小程序' ? '小程序商城' : source;
      },
      linkChagne() {
        this.$commonSensors.lithaTrack.cTrack('MemberEquityPageClick',{page_name:"经验明细", button_name:"去商城页选购" });
        uni.navigateTo({
          url: '/pages/item/categoryNew',
        });
      }
    },
  };
</script>

<style lang="less">
	.text_font{
		font-family: FrankNew-Regular,NotoSansSC-Regular;
	}
  .tipText {
    background-color: #f7f5f4;
    padding: 28rpx 30rpx;
    // color: #4d4d4d;
    display: flex;
    justify-content: space-between;
    margin-top: 36rpx;
    background-color: #A21215;
    color: #ffff;
    position: fixed;
    top: 115rpx;
    width: 100%;
    position: relative;
    font-family: FrankNew-Regular,NotoSansSC-Regular;

    .sText {
      font-size: 24rpx;
      color: #ffff !important;
      position: absolute;
      right: 30rpx;

      .mcl-youjiantou {
        font-size: 22rpx;
        margin-left: 4rpx;
      }
    }
  }

  .orderItem {
    height: 138rpx;
    border-bottom: 2rpx solid #f7f5f4;
    margin: 48rpx 48rpx 32rpx 48rpx;
    .title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 19rpx;

      label {
        font-size: 32rpx;
      }
    }

    .content {
      display: flex;
      justify-content: space-between;

      label {
        color: #aeaeae;
        font-size: 22rpx;
      }
    }
  }


  .empty_cart_text {
    font-family: FrankNew-Regular,NotoSansSC-Regular;
    color: #000000;
    font-size: 14px;
    line-height: 24px;
    margin-top: 40rpx;
    text-align: center;
  }

  .icon-xl {
    width: 108.38rpx;
    height: 80rpx;
    display: block;
    margin: 0 auto;
  }

  .empty-cartHidden {
    // display: none;
  }

  .empty-cartHidden.empty_cart {
    height: 880rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .shop_btn {
      display: flex;
      width: 100%;
    }

    .block {
      margin: 0 auto;
      text-align: center;
      display: flex;
      align-items: center;
    }

    .btn_group {
      display: flex;
      align-items: center;
      padding-top: 80rpx;

      .get_store {
        font-family: FrankNew-Regular,NotoSansSC-Regular;
        font-weight: 500;
        font-size: 28rpx;
        width: 232rpx;
        height: 80rpx;
        border-radius: 48rpx 16rpx 48rpx 48rpx;
        background-color: #CB171A;
        color: #FFFFFF;
        line-height: 80rpx;

      }
    }
  }

  .block {
    margin: 0 auto;
    text-align: center;
    display: flex;
    align-items: center;
  }
</style>
